<template>
    <el-tree :data="treeData" node-key="id" :props="props" ref="tree" show-checkbox></el-tree>
</template>
<script>
export default {
    data() {
        return {
            treeData: this.$store.state.userGroupStore.treeData,
            props: {
                label: 'name',
                children: 'submenuList'
            },
            menuPermission: this.$store.state.userGroupStore.menuPermission,
            menuStatus: this.$store.state.userGroupStore.menuStatus,
            isExpand: true,
            checkedPermissionArr: [],       //临时存储树形结构下面的所有父节点和子节点的id
        }
    },
    computed: {
        systemId() {
            return this.$store.state.systemId;
        }
    },
    watch: {
        treeData(newVal) {
            this.$refs.tree.store.defaultExpandAll = true;          //默认展开所有节点
        },
        menuPermission(newVal) {        //监听权限的变化，设置指定节点选
            this.$refs.tree.setCheckedKeys(newVal);
        },
        menuStatus(newVal) {
            switch(newVal[0]) {
                case 1:
                    //保存
                    this.save();
                    break;
                case 2:
                    //清空
                    this.$store.commit('userGroupStore/clearMenuPermission');
                    break;
                case 3:
                    //全选
                    this.checkedPermissionArr = [];
                    this.filterNodeId(this.treeData);
                    this.$store.commit('userGroupStore/updateMenuPermission', this.checkedPermissionArr);       //更新菜单权限选中
                    break;
                case 4:
                    //合拢展开
                    this.isExpand = !this.isExpand;
                    for(var i = 0; i < this.$refs.tree.store._getAllNodes().length; i++){
                        this.$refs.tree.store._getAllNodes()[i].expanded = this.isExpand;
                    }
                    break;
                default: break;
            }
        }
    },
    methods: {
        save() {        //保存用户勾选的菜单权限
            let tableRow = this.$store.state.userGroupStore.tableRow;
            if(tableRow[0]['name'] === '系统管理员') {
                //系统管理员没有修改菜单权限
                this.$message({message: '系统管理员没有修改权限', type: 'warning', duration: 1500});
                return false;
            }
            //如果不是系统管理员，那么拥有修改权限，可以修改除了(用户组管理)和(审批流程)节点之外的其它节点
            let childrenCheckedKeys = this.$refs.tree.getCheckedKeys(),          //子节点选中的权限
                parentCheckedKeys = this.$refs.tree.getHalfCheckedKeys(),        //父节点选中的权限
                allCheckedKeys = parentCheckedKeys.concat(childrenCheckedKeys);  //将父子节点选中的权限id整合到一个新数组中一起提交给后台
            let data = {
                ugid: tableRow[0]['id'],        //用户id（即当前操作的表格行id）
                systemId: this.systemId,        //系统id
                mids: allCheckedKeys            //菜单权限id数组
            }
            this.$http({
                method: "post",
                url: "menu/updateObject",
                data: data
            }).then(res => {
                if(res.data.code == 20001) {
                    this.$message({message: '权限修改成功', type: 'success', duration: 1500});
                } else {
                    this.$message({message: '权限修改失败', type: 'error', duration: 1500});
                }
            });
        },
        filterNodeId(arr) {         //递归将树形结构下面的所有父子节点的数据id整合到一个新数组checkedPermissionArr中
            let checkedPermissionArr = this.checkedPermissionArr,
                tableRow = this.$store.state.userGroupStore.tableRow;
            if(arr.length > 0) {
                if(tableRow[0]['name'] === '系统管理员') {
                    arr.forEach(item => {
                        checkedPermissionArr.push(item['id']);
                        if(item['submenuList'].length > 0) {
                            this.filterNodeId(item['submenuList']);
                        }
                    });
                } else {
                    arr.forEach((item, index) => {
                        //如果是系统管理员之外的其它成员，其默认是没有用户组管理和审批流程节点权限的，那么在全选状态下，不允许选中这两项
                        if(item['name'] === '用户组管理' || item['name'] === '审批流程') {
                            return;
                        }
                        checkedPermissionArr.push(item['id']);
                        if(item['submenuList'].length > 0) {
                            this.filterNodeId(item['submenuList']);
                        }
                    });
                }
            }
        }
    }
}
</script>